<style scoped>
.red {
  color: #EE0A24;
}

.grey {
  color: #bbb;
}

.container {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>

<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">设置密码</p>
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field v-model="password" type="password" name="password" label="设置密码" placeholder="请输入密码" autocomplete="off">
      </van-field>
      <van-field v-model="repassword" type="password" name="repassword" label="确认密码" placeholder="请确认密码"
                 autocomplete="off">
      </van-field>
      <div style="margin: 16px;">
        <van-button round block color="#F70D00" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue';
import {NavBar, Col, Row, Form, Field, Button} from 'vant';
import {requestToRegister} from "../../api/user";

Vue.use(NavBar)
Vue.use(Col)
Vue.use(Row)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)

export default {
  name: "checkCode",
  data() {
    return {
      password: '',
      repassword: '',
      tel: ''
    }
  },
  created() {
    this.tel = this.$route.params.tel
    console.warn("tel", this.$route.params.tel)
  },
  methods: {
    onSubmit(e) {
      if (!this.checkForm()) {
        this.$notify("不允许为空！")
        return;
      }
      if (this.password !== this.repassword) {
        this.$notify("两次密码不一致")
        return;
      }
      this.register()
      console.log("提交", e)
    },
    checkForm() {
      return this.password && this.repassword
    },
    back() {
      this.$router.back()
    },
    register() {
      console.log("开始注册")
      requestToRegister({tel: this.tel + '', password: this.password + ''}).then(res => {
        console.log("注册结果=》", res)
        this.$toast("注册成功")
        this.$router.replace('/login')
      })
    }
  }
}
</script>